import classes from "./index.module.css";
import React from "react";
import PropTypes from "prop-types";
import {Card, Col, Row, Typography} from "antd";
import PriceTag from "../PriceTag";
import TimeTick from "../TimeTick";

export default class ProductCard extends React.PureComponent {
    static propTypes = {
        title: PropTypes.string,
        badge: PropTypes.arrayOf(PropTypes.node),
        subtitle: PropTypes.arrayOf(PropTypes.string),
        image: PropTypes.node,
        rightUpButton: PropTypes.node,
        number:PropTypes.number,
        priceText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
        time: PropTypes.any,
    };

    constructor(props) {
        super(props);
        this.state={
            hour:0,
            minute:0,
            second:0
        }
    }
    UNSAFE_componentWillReceiveProps(props){
        this.setState({
            title:props.title,
            subtitle:props.subtitle,
            priceText:props.priceText,
            rightUpButton:props.rightUpButton
        })
    }
    UNSAFE_componentWillMount(){
        
        let now=new Date();
        if(this.props.time!==undefined){
            let time=this.props.time;
            let finishTime=this.props.time;
            finishTime.setDate(time.getDate()+1);
    
            this.setState({
                now,
                finishTime
            });
            this.interval =setInterval(()=>{
                let hour=0;
                let minute=0;
                let second=0;
                now=new Date();
                
                //定时器时间
                if(now < finishTime){
                    let leftTime=(finishTime-now)/1000;
                    hour=Math.floor(leftTime  / 60 / 60);
                    leftTime=leftTime - hour*60*60;
                    minute=Math.floor(leftTime  / 60 );
                    leftTime=leftTime-minute*60;
                    second=Math.floor(leftTime);
                    this.setState({
                        hour,
                        minute,
                        second,
                    })
                }
            },1000);
        }
    }
    componentWillUnmount(){
        clearInterval(this.interval);
    }
    render() {
        
        return (
            <Card bordered={false}>
                <Row type={"flex"}>
                    <Col flex={"auto"}>
                        <div className={classes.ProductImage}>
                            {this.props.image}
                        </div>
                    </Col>
                    <Col flex={"auto"} className={classes.FlexExpand}>
                        <div className={classes.TitleContainer}>
                            <Typography.Title level={2}>
                                {this.props.title}
                            </Typography.Title>
                            {this.props.badge && this.props.badge.map((badge, index) => (
                                <div key={index}>
                                    {badge}
                                </div>
                            ))}
                        </div>
                        {this.props.subtitle &&
                        <Typography.Text>
                            {this.props.subtitle.map((text, index) => (
                                <div key={index} className={classes.Subtitle}>{text}</div>
                            ))}
                        </Typography.Text>
                        }
                    </Col>
                    <Col flex={"auto"} style={{textAlign:"right"}}>
                        {this.props.priceText &&
                        <span>
                            { this.props.priceText !== undefined &&
                            <PriceTag pre="￥" price={this.props.priceText}/>}
                        </span>}
                        {this.props.number &&
                        <span className={classes.ProductCardNumber}>
                            X{this.props.number}<br/>
                        </span>}
                        {this.props.rightUpButton &&
                        <span>
                            {this.props.rightUpButton}<br/>
                        </span>}
                        {this.props.time && (this.state.now < this.state.finishTime)&&
                            <span>
                                付款倒计时 <TimeTick text={this.state.hour}/>:
                                <TimeTick text={this.state.minute}/>:
                                <TimeTick text={this.state.second}/>
                            </span>
                        }
                    </Col>
                </Row>
            </Card>
        );
    }
}